<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">坐席基本信息</div>
          <el-form
            style="width: 78%; margin-left: 60px"
            ref="ruleForm1"
            :model="infoForm"
            :rules="formrules"
            label-width="80px"
            autocomplete="off"
          >
            <el-form-item label="坐席编号" prop="agentId" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入坐席编号"
                  v-model="infoForm.agentId"
                  :disabled="type != 3"
                ></el-input>
                <!-- <span v-if="viewShow" class="item-span">4-20位字符，可由数字字母组成，字母区分大小写</span> -->
              </div>
            </el-form-item>
            <el-form-item label="坐席视讯号" prop="agentVideoNum" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入坐席视讯号"
                  v-model="infoForm.agentVideoNum"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="视讯号密码" prop="passwordWeb" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  type="password"
                  placeholder="请输入视讯号密码"
                  v-model="infoForm.passwordWeb"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPasswordWeb" label-width="100px" v-show="type!=1">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  type="password"
                  placeholder="请输入确认视讯号密码"
                  v-model="infoForm.confirmPasswordWeb"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="坐席姓名" prop="agentName" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入坐席姓名"
                  v-model="infoForm.agentName"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="坐席密码" prop="password" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  type="password"
                  placeholder="请输入坐席密码"
                  v-model="infoForm.password"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword" label-width="100px" v-show="type!=1">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  type="password"
                  placeholder="请输入确认密码"
                  v-model="infoForm.confirmPassword"
                  :disabled="type == 1"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="坐席状态" prop="enable" label-width="100px">
              <!-- <div class="elform-item" > -->
                <el-radio-group
                  v-model="infoForm.enable"
                  :disabled="type == 1"
                >
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="2">禁用</el-radio>
                </el-radio-group>
              <!-- </div> -->
            </el-form-item>
            <el-form-item label="选择技能组" prop="enable" label-width="100px">
              <div class="elform-item">
               <el-select
                size="mini"
                clearable
                v-model="infoForm.skillGroup"
                placeholder="全部"
                :disabled="type==1"
              >
                <el-option
                  v-for="(item, index) in skillGroupList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              </div>
            </el-form-item>
            <el-form-item label="角色" prop="enable" label-width="100px">
              <div class="elform-item">
               <el-select
                size="mini"
                clearable
                v-model="infoForm.skillGroup"
                placeholder="全部"
                :disabled="type==1"
              >
                <el-option
                  v-for="(item, index) in skillGroupList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              </div>
            </el-form-item>
<!--            <el-form-item label="手机号码" label-width="100px">-->
<!--              <el-input-->
<!--                style="width: 40%"-->
<!--                size="small"-->
<!--                maxlength="11"-->
<!--                @input="-->
<!--                  infoForm.phoneNum = infoForm.phoneNum.replace(/[^\d]/g, '')-->
<!--                "-->
<!--                :disabled="type==1"-->
<!--                placeholder="请输入手机号码"-->
<!--                v-model="infoForm.mobile"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="邮箱地址" prop="mail" label-width="100px">-->
<!--              <el-input-->
<!--                style="width: 40%"-->
<!--                size="small"-->
<!--                :disabled="type==1"-->
<!--                placeholder="请输入邮箱地址"-->
<!--                v-model="infoForm.mail"-->
<!--              ></el-input>-->
<!--            </el-form-item>-->
          </el-form>
          <div style="width: 78%; margin-left: 70px">
            <el-button
              size="mini"
              v-if="type == '1'"
              type="default"
              @click="cancel()"
              >返回</el-button
            >
            <el-button size="mini" v-else type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              size="mini"
              type="primary"
              v-if="type!=1"
              @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import { fetchAllSkill} from "@/api/systemapi/skill";
import HeaderTitle from "@/components/Headertitle/index";
import {fetchDetail,fetchCreate,fetchEdit} from "@/api/systemapi/agent";
import { translateDataToTree } from "@/utils";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    var checkAgentId = (rule, value, callback) => {
      var res = /^[a-zA-Z0-9]/;
      if (!value) {
        return callback(new Error("坐席编号不能为空"));
      } else if (!res.test(value)) {
        return callback(new Error("坐席编号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkAgentVideoNum = (rule, value, callback) => {
      var res = /^[a-zA-Z0-9]/;
      if (!value) {
        return callback(new Error("坐席视讯号不能为空"));
      } else if (!res.test(value)) {
        return callback(new Error("坐席视讯号不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      } else if (value != this.infoForm.password) {
        return callback(new Error("两次密码输入不一致"));
      } else {
        return callback();
      }
    };
    var checkPasswordWeb = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      } else if (value != this.infoForm.passwordWeb) {
        return callback(new Error("两次密码输入不一致"));
      } else {
        return callback();
      }
    };
    var checkuserPhone = (rule, value, callback) => {
      var res = /^1[3456789]\d{9}$/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("手机号码不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      var res = /@/;
      if (!value) {
        return callback();
      } else if (!res.test(value)) {
        return callback(new Error("邮箱不合规格，请重新输入"));
      } else {
        return callback();
      }
    };
    return {
      titleList: [{ title: "坐席管理" }, { title: "新增坐席" }],
      type: "", //1查看2编辑3新增
      viewShow: true, // 查看展示
      skillGroupList:[],
      infoForm: {
        agentId: "", // 坐席编号
        agentVideoNum: "", // 坐席视讯号
        passwordWeb:"",//视讯号密码
        confirmPasswordWeb:"",//确认视讯号密码
        agentName: "", // 坐席姓名
        password: "", // 坐席密码
        skillGroup: "", // 技能组
        confirmPassword: "", // 确认密码
        // mobile: "", // 手机号码
        // mail: "", // 邮箱地址
        enable: 1, //坐席状态
      },
      addrules: {
        agentId: [
          { required: true, validator: checkAgentId, trigger: "blur" },
          {
            min: 4,
            max: 20,
            message: "长度在 4 到 20 个字符",
            trigger: "blur",
          },
        ],
        agentVideoNum: [
          { required: true, validator: checkAgentVideoNum, trigger: "blur" },
        ],
        agentName: [
          {  message: "请输入坐席名称", trigger: "change" },
        ],
        // skillGroup: [
        //   { required: true, message: '请选择技能组权限', trigger: 'change' }
        // ],

        password: [
          { required: true, message: "坐席密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [
          { required: true, validator: checkPassword, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        passwordWeb: [
          { required: true, message: "坐席密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        confirmPasswordWeb: [
          { required: true, validator: checkPasswordWeb, trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        // mobile: [
        //   { validator: checkuserPhone, trigger: "blur" },
        //   {
        //     min: 11,
        //     max: 13,
        //     message: "长度在 11 到 13 个字符",
        //     trigger: "blur",
        //   },
        // ],
        // mail: [{ validator: checkEmail, trigger: "blur" }],
      },
      editrules: {
        roleId: [
          { required: true, message: "请选择账号权限", trigger: "change" },
        ],
        phoneNum: [
          { validator: checkuserPhone, trigger: "blur" },
          {
            min: 11,
            max: 13,
            message: "长度在 11 到 13 个字符",
            trigger: "blur",
          },
        ],
        mail: [{ validator: checkEmail, trigger: "blur" }],
      },
      ccodShow: false,
      zsAudioStatus: "",
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    if (this.type == "3") {
      this.titleList[1].title = "新增坐席";
    }
    if (this.type == "2") {
      this.titleList[1].title = "编辑坐席";
      this.editid = this.$route.query.id;
      this.getEditData(this.$route.query.id);
    }
    if (this.type == "1") {
      this.titleList[1].title = "查看坐席";
      this.getEditData(this.$route.query.id);
    }
    this.fetchSkillList()
  },
  computed: {
    formrules: function () {
      if (this.type == "1") {
        return this.editrules;
      } else {
        return this.addrules;
      }
    },
  },
  methods: {
    fetchSkillList() {
      fetchAllSkill({}).then((response) => {
        if (response.code == 0) {
          this.skillGroupList = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    cancel() {
      this.$router.push("/system/agent/list");
    },
    getCcod() {
      fetchCcod({ entNum: this.entNum }).then((res) => {
        if (res.code == 0) {
          this.ccodShow = true;
        } else {
          this.ccodShow = false;
        }
      });
    },
    getOrganList() {
      fetchOrganList().then((res) => {
        this.treeData = res.data;
      });
    },
    // 账号权限下拉
    getAccount() {
      fetchAccount().then((res) => {
        this.accountList = res.rows;
      });
    },
    getSkillgroup() {
      fetchSkillgroup({ entNum: this.entNum }).then((res) => {
        if (res.code == 0) {
          this.groupList = res.data;
        }
      });
    },
    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        if(this.type != 1){
          res.data.password=null
          res.data.passwordWeb = null
        }

        this.infoForm = res.data;
      });
    },
    // inputFn() {
    //   this.infoForm.phoneNum=this.infoForm.phoneNum.replace(/[^\d]/g,'')
    //   // value=value.replace(/[^\d]/g,'')
    // },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });

      Promise.all([p1]).then(() => {
        console.log("验证通过,提交表单");
        if (this.type == "2") {
          fetchEdit({
            id: this.editid,
            ...this.infoForm,
            password: MD5(this.infoForm.password),
            confirmPassword: MD5(this.infoForm.confirmPassword),
            passwordWeb: MD5(this.infoForm.passwordWeb),
            confirmPasswordWeb: MD5(this.infoForm.confirmPasswordWeb),
          }).then((response) => {
            if (response.code == 0) {
              this.cancel();
            } else {
              this.$message({
                type: "error",
                message: response.msg,
              });
            }
          });
        } else {
          fetchCreate({
            ...this.infoForm,
            password: MD5(this.infoForm.password),
            confirmPassword: MD5(this.infoForm.confirmPassword),
            passwordWeb: MD5(this.infoForm.passwordWeb),
            confirmPasswordWeb: MD5(this.infoForm.confirmPasswordWeb),
          }).then((response) => {
            if (response.code == 0) {
              this.cancel();
            } else {
              this.$message({
                type: "error",
                message: response.msg,
              });
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          margin-left: 10px;
        }
        .elform-item {
          display: flex;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
